import React from 'react';
import { 
  IonTabs, 
  IonRouterOutlet, 
  IonTabBar, 
  IonTabButton, 
  IonIcon, 
  IonLabel 
} from '@ionic/react';
import { Route, Redirect } from 'react-router-dom';
import { chatbubbleEllipses, person } from 'ionicons/icons';

import ChatPage from '../pages/ChatPage';
import ProfilePage from '../pages/ProfilePage';
import TranslatorPage from '../pages/TranslatorPage';
import ChatHistoryPage from '../pages/ChatHistoryPage';
import ChatSettingsPage from '../pages/ChatSettingsPage';

const TabsContainer: React.FC = () => {
  return (
    <IonTabs>
      <IonRouterOutlet>
        <Route exact path="/chat" component={ChatPage} />
        <Route exact path="/chat/history" component={ChatHistoryPage} />
        <Route exact path="/chat/settings" component={ChatSettingsPage} />
        <Route exact path="/profile" component={ProfilePage} />
        <Route exact path="/translator" component={TranslatorPage} />
        <Route exact path="/">
          <Redirect to="/chat" />
        </Route>
      </IonRouterOutlet>

      <IonTabBar slot="bottom">
        <IonTabButton tab="chat" href="/chat">
          <IonIcon icon={chatbubbleEllipses} />
          <IonLabel>对话</IonLabel>
        </IonTabButton>
        
        <IonTabButton tab="profile" href="/profile">
          <IonIcon icon={person} />
          <IonLabel>我的</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  );
};

export default TabsContainer;